<template>
  <div class="turnover_status">
    <span class="block_label_color mad_label"
          :class="stateColor">{{data.turnoverStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'TurnoverStatus',
  props: {
    data: Object
  },
  computed: {
    // 根据工单进度状态返回相应class
    stateColor() {
      switch (this.data.turnoverStatusValue) {
        case 'Normal':
          // 正常
          return 'turnover_status_normal'
        case 'Paused':
          // 暂停
          return 'turnover_status_suspend'
        case 'InProblem':
          // 问题处理中
          return 'turnover_status_problem_handling'
        case 'PartTerminated':
          // 分级终止
          return 'turnover_status_level'
        case 'Terminated':
          // 已终止
          return 'turnover_status_end'
        default:
          return ''
      }
    }
  }
}
</script>

<style lang="less">
  // 正常
  @turnoverStatusNormal: #00a949;
  // 暂停
  @turnoverStatusSuspend: #ff931f;
  // 问题处理中
  @turnoverStatusProblemHandling: #00b4ff;
  // 分级终止
  @turnoverStatusLevel: #3c4a63;
  // 已终止
  @turnoverStatusEnd: #7e8e9f;
  .turnover_status{
    .block_label_color{
      // 正常
      &.turnover_status_normal{
        background-color: @turnoverStatusNormal;
      }
      // 暂停
      &.turnover_status_suspend{
        background-color: @turnoverStatusSuspend;
      }
      // 问题处理中
      &.turnover_status_problem_handling{
        background-color: @turnoverStatusProblemHandling;
      }
      // 分级终止
      &.turnover_status_level{
        background-color: @turnoverStatusLevel;
      }
      // 已终止
      &.turnover_status_end{
        background-color: @turnoverStatusEnd;
      }
    }
  }
</style>
